<template>
  <el-cascader ref='addressRef' :props="adprops" class="csrea" v-model="area" @change="handleChangeArea" placeholder="请选择地区"></el-cascader>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'

import {getData} from '@/utils/axios'
export default {
  name: 'Address',//地址三级下拉框
  props: {
    areaId:Array,
    areaN:String
  },
  setup(props) {
    const addressRef = ref(null)
    console.log(props,222222)
    const state = reactive({
       area:props.areaId,//地址id数组
       areaName:props.areaN,//地址名称
       adprops:{
         lazy: true,
         lazyLoad(node, resolve) {
            let parentId='';
            if(node.level!==0&&node.data){
                parentId=node.data.value;
            }
            getData('common/common/getAreaHierarchyList',{parentId}).then(res=>{
                if(res.data.flag){
                const nodes = res.data.data.map(item=>{
                let leaf=item.areaCode%100==0?false:true // false是有子节点
                return  {
                    value: item.id,
                    label: item.name,
                    leaf: leaf
                    }
                })
                  return resolve(nodes)
                }
            }) 
        }
      },
 
    })
   const handleChangeArea = ( node ) => {//返回最后的id值
      console.log(node,'node')
      state.areaName='';
      if(node.length>0)
      {
        addressRef.value.getCheckedNodes()[0].pathLabels.forEach(element => {//获取地址名称
              state.areaName+=element
         });;
       //  state.area= node[node.length-1];
      }
    }
    return {
      ...toRefs(state),
      addressRef,
     handleChangeArea
    }
  }
}
</script>
<style scoped>
 
</style>